<template>
  <div class="address-book">
    <!-- 搜索栏 -->
    <div class="search-box">
      <i class="iconfont icon-search"></i>
      <input type="text" placeholder="搜索联系人或群组" v-model="searchQuery">
    </div>

    <!-- 联系人列表 -->
    <div class="contacts-container">
      <!-- 快速跳转栏 -->
      <div class="index-bar">
        <div class="index-item special">☆</div>
        <div 
          v-for="letter in indexList" 
          :key="letter"
          class="index-item"
          @click="scrollToLetter(letter)"
        >
          {{ letter }}
        </div>
      </div>

      <!-- 分组联系人列表 -->
      <div class="contacts-list" ref="contactsList">
        <!-- 群组分组 -->
        <div class="contact-section">
          <div class="section-title">
            <i class="iconfont icon-group"></i>
            我的群组
          </div>
          <div 
            v-for="group in groups" 
            :key="group.id"
            class="contact-item"
            @click="selectGroup(group)"
          >
            <img :src="group.avatar" :alt="group.name" class="contact-avatar">
            <div class="contact-info">
              <div class="contact-name">{{ group.name }}</div>
              <div class="contact-desc">{{ group.memberCount }}人</div>
            </div>
          </div>
          <div class="contact-item create-group">
            <i class="iconfont icon-add"></i>
            <span>创建群组</span>
          </div>
        </div>

        <!-- 我的收藏 -->
        <div class="contact-section">
          <div class="section-title">
            <i class="iconfont icon-star"></i>
            我的收藏
          </div>
          <div class="contact-item">
            <i class="iconfont icon-star-fill"></i>
            <span>收藏的联系人</span>
          </div>
        </div>

        <!-- 特殊分组 -->
        <div class="contact-section">
          <div class="section-title">
            <i class="iconfont icon-group"></i>
            特别关注
          </div>
          <div class="contact-item">
            <i class="iconfont icon-group-fill"></i>
            <span>群聊</span>
          </div>
          <div class="contact-item">
            <i class="iconfont icon-tag"></i>
            <span>标签</span>
          </div>
        </div>

        <!-- 按字母分组的联系人 -->
        <div 
          v-for="(group, letter) in groupedContacts" 
          :key="letter" 
          class="contact-section"
          :id="`section-${letter}`"
        >
          <div class="section-title">{{ letter }}</div>
          <div 
            v-for="contact in group" 
            :key="contact.id"
            class="contact-item"
            @click="selectContact(contact)"
          >
            <img :src="contact.avatar" :alt="contact.name" class="contact-avatar">
            <div class="contact-info">
              <div class="contact-name">{{ contact.name }}</div>
              <div class="contact-desc">{{ contact.description || '暂无签名' }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const searchQuery = ref('')
const contactsList = ref(null)

// 群组数据
const groups = ref([
  {
    id: 'g1',
    name: '技术交流群',
    avatar: 'https://api.dicebear.com/7.x/identicon/svg?seed=tech',
    memberCount: 128,
    description: '技术讨论与分享'
  },
  {
    id: 'g2',
    name: '产品设计群',
    avatar: 'https://api.dicebear.com/7.x/identicon/svg?seed=design',
    memberCount: 56,
    description: '产品与设计交流'
  }
])

// 联系人数据
const contacts = ref([
  {
    id: 1,
    name: '阿里',
    pinyin: 'ali',
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=ali',
    description: '技术支持'
  },
  {
    id: 2,
    name: '白云',
    pinyin: 'baiyun',
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=baiyun',
    description: '产品经理'
  },
  {
    id: 3,
    name: '陈晨',
    pinyin: 'chenchen',
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=chenchen',
    description: '设计师'
  },
  // 可以添加更多联系人
])

// 按拼音首字母分组联系人
const groupedContacts = computed(() => {
  const filtered = contacts.value.filter(contact => 
    contact.name.includes(searchQuery.value) ||
    contact.pinyin.includes(searchQuery.value.toLowerCase())
  )

  return filtered.reduce((groups, contact) => {
    const firstLetter = contact.pinyin[0].toUpperCase()
    if (!groups[firstLetter]) {
      groups[firstLetter] = []
    }
    groups[firstLetter].push(contact)
    return groups
  }, {})
})

// 索引列表
const indexList = computed(() => {
  return Object.keys(groupedContacts.value).sort()
})

// 滚动到指定字母分组
const scrollToLetter = (letter) => {
  const element = document.getElementById(`section-${letter}`)
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' })
  }
}

// 选择联系人
const selectContact = (contact) => {
  // 这里可以添加选择联系人后的操作
  console.log('Selected contact:', contact)
}

// 选择群组
const selectGroup = (group) => {
  // 这里可以添加选择群组后的操作
  console.log('Selected group:', group)
}
</script>

<style scoped>
.address-book {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: white;
}

.search-box {
  padding: 12px;
  position: relative;
  border-bottom: 1px solid #e6e6e6;
}

.search-box input {
  width: 100%;
  padding: 8px 32px;
  border: 1px solid #e6e6e6;
  border-radius: 20px;
  font-size: 14px;
}

.search-box i {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
}

.contacts-container {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.contacts-list {
  height: 100%;
  overflow-y: auto;
  padding: 0 12px;
}

.index-bar {
  position: fixed;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  padding: 4px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.3);
}

.index-item {
  padding: 2px 4px;
  font-size: 12px;
  color: white;
  cursor: pointer;
}

.index-item:hover {
  color: #1976d2;
}

.contact-section {
  margin-bottom: 10px;
}

.section-title {
  padding: 10px 0;
  color: #666;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.contact-item:hover {
  background-color: #f5f7fb;
}

.contact-avatar {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  margin-right: 12px;
  background: #f5f7fb;
}

.contact-info {
  flex: 1;
}

.contact-name {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}

.contact-desc {
  font-size: 12px;
  color: #999;
}

.contact-item i {
  font-size: 20px;
  margin-right: 12px;
  color: #666;
}

/* 添加群组相关样式 */
.create-group {
  color: #1976d2;
}

.create-group i {
  font-size: 20px;
  margin-right: 12px;
  color: #1976d2;
}

.index-item.special {
  font-size: 14px;
}

.contact-item.create-group:hover {
  background-color: #e3f2fd;
}
</style> 